<template>
    <div class="app-container">
        <div class="filter-container">
            <el-input @keyup.enter.native="handleFilter" style="width: 260px;" class="filter-item"
                      placeholder="请输入查询信息" v-model="query.keyword">
            </el-input>
            <el-cascader :props="{label: 'name',children: 'children',value:'id'}"
                         :options="categoryList"
                         :show-all-levels="true"
                         :clearable="true"
                         :filterable="true"
                         change-on-select
                         class="filter-item"
                         placeholder="请选择栏目" v-model="query.category_id">

            </el-cascader>
            <el-button class="filter-item" v-waves type="primary" icon="el-icon-search" @click="handleFilter">查询
            </el-button>
            <el-button class="filter-item" @click="showEditDialog(0)" style="margin-left: 0" type="primary"
                       icon="el-icon-edit"> 添加
            </el-button>
        </div>
        <template>
            <el-table
                :data="tableList.items"
                v-loading="stateManager.listLoading"
                border
                fit
                highlight-current-row
                style="width: 100%;min-height:800px;"
            >
                <el-table-column
                    prop="thumbnail_path"
                    label="介绍图"
                    width="130px" align="center"
                >
                    <template slot-scope="scope">
                        <img :src="scope.row.thumbnail_path" class="img-fluid">
                    </template>
                </el-table-column>
                <el-table-column
                    prop="title"
                    label="文章标题"
                >
                </el-table-column>
                <el-table-column
                    prop="sub_title"
                    label="副标题"
                >
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="categories"
                    width="150px"
                    label="栏目"
                >
                    <template slot-scope="scope">
                        <template v-for="item in scope.row.categories">
                            <el-tag size="mini" style="margin-right: 5px">{{item.name}}</el-tag>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="categories"
                    width="150px"
                    label="标签"
                >
                    <template slot-scope="scope">
                        <template v-for="item in scope.row.tags" v-if="scope.row.tags.length">
                            <el-tag size="mini" style="margin-right: 5px">{{item}}</el-tag>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="230" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="showEditDialog(scope.row.id)" type="success"
                                   v-waves
                                   icon="el-icon-edit-outline"></el-button>
                        <el-button size="mini" type="danger" icon="el-icon-delete"
                                   v-waves
                                   @click="handleDelete(scope.row.id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination
                    background
                    layout="prev, pager, next,total"
                    :page-size="15"
                    :total="list.total"
                    @current-change="handleCurrentChange"
                    :current-page="list.currentPage">
                </el-pagination>
            </div>

        </template>
    </div>
</template>
<script>
    import {mapGetters} from 'vuex'
    import waves from '@/directive/waves' // Waves directive
    export default {
        name: 'admin',
        directives: {waves},
        data: function () {
            return {
                stateManager: {
                    refreshList: true,
                    editDialogVisible: false,
                    editModelId: null,
                    listLoading: true,
                    buttonLoading: false,
                },
                query: {
                    keyword: '',
                    category_id: '',
                    page: 1,
                    include: 'index'
                },
                list: this.$listDataSource({
                    url: '/api/cms/blog'
                }),
                model: this.$modelDataSource({
                    url: '/api/cms/blog',
                    dataKey: 'model',
                    attributes: {
                        id: '',
                    }
                }),
                currentPage: 1,
            }
        },
        created() {
            this.$store.commit('app/setPageTitle', '文章管理')
            this.$store.dispatch('cms/fetchCategoryList')
        },
        methods: {
            showEditDialog: function (id) {
                this.$router.push({name: 'content-edit', params: {id: id}})
            },
            handleFilter() {
                this.query.page = 1
                this.stateManager.refreshList = true
            },
            // 翻页
            handleCurrentChange(val) {
                this.currentPage = val
                this.query.page = val
                this.stateManager.refreshList = true
            },
            handleDelete(id) {
                let self = this
                this.$confirm('是否删除此项？', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                    title: '删除确认'
                }).then(() => {
                    self.model.uuid = id
                    self.model.destroy(function () {
                        self.stateManager.refreshList = true
                        self.$message.success('删除成功')
                    })
                }).catch((res) => {
                    console.log(res.response)
                    self.$message.info('删除失败')
                })
            },
        },
        computed: {
            ...mapGetters([
                'categoryList'
            ]),
            tableList() {
                let self = this
                if (this.stateManager.refreshList) {
                    this.stateManager.listLoading = true
                    this.$store.dispatch('cms/fetchTags')
                    this.list.fetch(self.query, function () {
                        self.stateManager.refreshList = false
                        self.stateManager.listLoading = false
                    })
                }
                return this.list
            }
        }
    }
</script>
